import React, { useEffect } from 'react'
import { Layout } from 'antd'
import { connect } from 'react-redux'
import { getLuckySheetConf } from '../../redux/actionCreator/lineLossTempActionCreater'

const { Content } = Layout
// 表格体
function LuckySheetContent (props) {

  //将状态和方法解构出来,直接使用
  let { luckySheetOption, getLuckySheetConf, viewId } = props

  // 在组件挂载时渲染
  useEffect(() => {
    // 如果redux中的配置有数据就直接用缓存渲染，如果没有再去从后端获取
    if (luckySheetOption !== "") {

      if (window.luckysheet.getAllSheets().length !== 0) {
        window.luckysheet.destroy()
      }
      // 创建
      window.luckysheet.create(JSON.parse(luckySheetOption))

    } else {
      getLuckySheetConf()
    }

  }, [luckySheetOption, getLuckySheetConf, viewId])

  // 报表样式
  const luckyCss = {
    margin: '0px',
    padding: '0px',
    position: 'relative',
    width: '100%',
    height: '100%',
    left: '0px'
  }

  return (
    <Content className="site-layout" style={{ padding: 0, height: '90%' }}>


      <div id='luckysheet' style={luckyCss}>

      </div>

    </Content>
  )
}
// 将state映射到props中
const mapStateToProps = (state) => {
  return {
    luckySheetOption: state.LineLossTempReducer.luckySheetOption,
    viewId: state.LineLossTempReducer.viewId,
    insertDate: state.LineLossTempReducer.insertDate
  }
}

//这是修改redux状态的方法
const mapDispatchToProps = {
  getLuckySheetConf,

}

export default connect(mapStateToProps, mapDispatchToProps)(LuckySheetContent)